<!doctype html>
<html>
  <head>
    <title>Leaflet Context Menu</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.2/dist/leaflet.css"/>
    <link rel="stylesheet" href="../dist/leaflet.contextmenu.css"/>
  </head>
  <body>
    <div id="map" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></div>
    <script src="https://unpkg.com/leaflet@1.0.2/dist/leaflet.js"></script>
    <script src="../dist/leaflet.contextmenu.js"></script>
    <script>
      var map,
          cm,
          ll = new L.LatLng(-36.852668, 174.762675),
          ll2 = new L.LatLng(-36.86, 174.77);

      function showCoordinates (e) {
	      alert(e.latlng);
      }

      function centerMap (e) {
	      map.panTo(e.latlng);
      }

      function zoomIn (e) {
	      map.zoomIn();
      }

      function zoomOut (e) {
	      map.zoomOut();
      }

      map = L.map('map', {
	      center: ll,
	      zoom: 15,
	      contextmenu: true,
      contextmenuWidth: 140,
	      contextmenuItems: [{
		      text: 'Show coordinates',
		      callback: showCoordinates
	      }, {
		      text: 'Center map here',
		      callback: centerMap
	      }, '-', {
		      text: 'Zoom in',
		      icon: 'images/zoom-in.png',
		      callback: zoomIn
	      }, {
		      text: 'Zoom out',
		      icon: 'images/zoom-out.png',
		      callback: zoomOut
	  }]
      });

	  L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
		  attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
	  }).addTo(map);

      L.marker(ll, {
          contextmenu: true,
          contextmenuItems: [{
              text: 'Marker item',
              index: 0
          }, {
              separator: true,
              index: 1
          }]
      }).addTo(map);

      L.marker(ll2, {
          contextmenu: true,
          contextmenuInheritItems: false,
          contextmenuItems: [{
              text: 'Marker item'
          }]
      }).addTo(map);

    </script>
  </body>
</html>
